<template>
  <div id="single-blog">
      <h1>{{blog.title}}</h1>
      <article>{{blog.body}}</article>
     <el-button type="danger" plain @click="deleteSing()">删除</el-button>
     <router-link :to="'/edit/'+id">编辑</router-link>
  </div>
</template>

<script>
export default {
    name:"SingleBlog",
  data() {
    return {
        id:this.$route.params.id,
        blog:{}
    };
  },
  methods:{
    deleteSing(){
        this.$http.delete("http://jsonplaceholder.typicode.com/posts/" + this.id)
        .then(response=>{
            this.$router.push({path:'/'})
        }),
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created() {
    this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id)
    .then(function(data){
        // console.log(data);
        this.blog = data.body;
    })
  },
};
</script>
<style  scoped>
#single-blog{
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    background-color: #eee;
    border: 1px dotted #aaa;
}

</style>